<template>
    <!-- 短信验证码登录 -->
    <div class="msgLogin">
        <!-- <div class="textStyle">
            <h1>短信登入</h1>
        </div> -->
        <div>
            <el-form-item label="手机号" class="iphoneNum">

                <el-input v-model="phoneNumber" maxlength="11" class="captcha phone"></el-input>
                <span class="captcha-svg"
                    style="color: #888; font-weight:bolder; 45px; text-decoration: underline; user-select: none; user-select:none;"
                    v-text="msg" @click="sendMsg">
                </span>
            </el-form-item>
            <el-form-item label="验证码" class="codemsg">
                <el-input v-model="code"></el-input>
            </el-form-item>
            <div class="submit">
                <el-form-item>
                    <el-button type="primary" @click="submitBtn">提交</el-button>

                </el-form-item>

            </div>


        </div>

    </div>


</template>
<script>
import * as api from "@/api/user"


export default {
    props:{
        storageUserInfo:{
            type:Function,
            require:true
        }
    },
    data() {
        return {
           
            msg: "点击发送验证码",
            flag: true,//一个开关
            phoneNumber:"",
            code:""//短信验证码
        }
    },
    methods: {
        async sendMsg() {
            if (this.flag) {
                this.flag=false
                let delay = 5
                let res =await api.getSmsCode(this.phoneNumber)
                // console.log(res)
                if(res.data.state){
                    // 短信发送成功
                    this.$message({
                        type:"success",
                        message:"短信发送成功"
                    })
                }else{
                    this.$message.error(res.data.msg)
                }
                this.msg = `${delay}秒后重新发送`
                this.interval = setInterval(() => {
                    delay--
                    if (delay < 1) {
                        this.msg = "点击发送验证码"
                        clearInterval(this.interval)
                        this.flag=true
                    } else {
                        this.msg = `${delay}秒后重新发送`
                    }
                }, 1000)
            }
        },
        async submitBtn(){
            let res =await api.smsLogin(this.code)
            console.log(res)
            // 调用父组件的方法 储存用户信息
            this.storageUserInfo(res.data)
            // 跳转页面
            this.$router.push('/')

        }


    }
}




</script>

<style lang="less" scoped>
.img {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-left: 120px;
}

p {
    text-align: center;
    color: white;
}

.box {
    position: relative;
}




.container {

    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.Login {
    width: 450px;
    height: 550px;
    // border: 1px solid black;
    background-color: rgba(0, 0, 0, 0.4);
    // display: flex;
    // justify-content: center;
    // align-items: center;
    position: absolute;
    right: 100px;
    top: 130px;

}

.textStyle {
    color: white;
    text-align: center;
    margin: 60px 0 40px 0;

}

.submit {

    margin-top: 50px;
}

.el-button {
    width: 250px;
}

.el-form {
    position: fixed;
    right: 10%;
    top: 25%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 100px 0 50px 0;

    /deep/ .el-input__inner {
        width: 250px;
    }

    /deep/ .el-button--primary {
        background: linear-gradient(90deg, #1596fb, #002dff);
        width: 250px;
    }

    /deep/ .el-form-item__label {
        color: #fff;
    }


    .title {
        margin: 0 0 60px 0;
        text-align: center;
        color: #fff;
    }

    /deep/ .captcha {
        width: 100px;
        vertical-align: top;


    }

    svg path {
        stroke: red;
    }

    .captcha-svg {
        background: #fff;
        display: inline-block;
        height: 41px;
        width: 150px;
        text-align: center;
        cursor: pointer;
        border: 0;
        border-radius: 0px 5px 5px 0;
        padding-top: 2px;
    }

    .el-form-item__content {
        margin-left: 30px !important;
        width: 250px !important;
    }
}


.msgLogin {
    /deep/ .phone {
        width: 140px !important;
    }

    /deep/ .captcha-svg {
        width: 110px !important;
    }
}

.codemsg {
    /deep/.el-input__inner {
        width: 250px;
        height: 43px;
    }
}

.iphoneNum {
    /deep/ .el-input__inner {
        height: 43px;
        border-radius: 5px 0 0 5px;
        border: 0;
        font-size: 18px;
    }
}
</style>

